<template>
  <div>
    <div class="search-title">
      <van-search shape="round" v-model="keyWords" placeholder="请输入搜索关键词" @search="onSearch" @cancel="keyWords = ''" />
    </div>
    <div class="search-history" v-if="qaRetLi.length > 0 || caseRetLi.length > 0">
      <div class="search-history-tag" style="margin-bottom: 10px;">
        搜索结果
      </div>
      <div class="search-history-cont">
        <ul>
          <li v-for="(item, index) in  qaRetLi " :key="item._id">
            <div v-if="item.answer.length <= 1">
              <div
                v-html="('' + (index + 1) + '.' + item.content).replaceAll(keyWords, `<span style='color:red'>` + keyWords + `</span>`)">
              </div>
              <div>
                <div v-for="(c, ci) in item.choices">{{ c }}</div>
              </div>
            </div>

            <div v-else>
              <div
                v-html="('' + (index + 1) + '.' + item.content).replaceAll(keyWords, `<span style='color:red'>` + keyWords + `</span>`)">
              </div>
              <div v-for="(c, ci) in item.choices" :name="c.split('.')[0]">{{
                c
              }}
              </div>
            </div>

            <div>
              <div>
                {{ "答案: " + item.answer + (item.explain ? (" 解析:" + item.explain) : "") }}</div>
            </div>

            <p></p>
          </li>
        </ul>

        <ul>
          <li v-for="(item, index) in  caseRetLi " :key="item._id">
            <div
              v-html="('' + (index + qaRetLi.length) + '.' + item.content.replaceAll('\n', '<br>')).replaceAll(keyWords, `<span style='color:red'>` + keyWords + `</span>`)">
            </div>
            <p></p>
          </li>
        </ul>

      </div>
    </div>

    <!-- <div class="search-history" v-if="searchLists.length === 0 || keyWords === ''">
      <div class="search-history-tag">
        历史记录<div class="search-history-img" @click="onDelete"><img src="/@/assets/images/delete.png" /></div>
      </div>
      <div class="search-history-cont">
        <div class="van-ellipsis search-history-list" v-for="(item, index) in hisoryLists" :key="index"
          @click="goDetail(item)">
          <span>·</span>{{ item.title }}
        </div>
      </div>
    </div> -->
  </div>
</template>
<script setup>
import { ref } from 'vue'

console.log('Search setup:')
const keyWords = ref('')
const searcQaLi = ref([])
const searcCaseLi = ref([])
const qaRetLi = ref([])
const caseRetLi = ref([])
const hisoryLists = ref([])

const examIndex = localStorage.getItem('examIndex')
searcQaLi.value = JSON.parse(localStorage.getItem('qasCache' + examIndex))
searcCaseLi.value = JSON.parse(localStorage.getItem('casesCache' + examIndex))

const onDelete = () => {
  this.hisoryLists = []
  localStorage.setItem('searchHistory', [])
}

const onSearch = () => {
  qaRetLi.value = []
  caseRetLi.value = []
  var kw = keyWords.value
  console.log('onSearch:', kw)
  for (var i = 0; i < searcQaLi.value.length; i++) {
    if (searcQaLi.value[i].content.indexOf(kw) > -1) {
      qaRetLi.value.push(searcQaLi.value[i])
    }
  }
  console.log('qaRetLi:', qaRetLi.value)
  for (var i = 0; i < searcCaseLi.value.length; i++) {
    if (searcCaseLi.value[i].content.indexOf(kw) > -1) {
      caseRetLi.value.push(searcCaseLi.value[i])
    }
  }
  console.log('qaRetLi:', qaRetLi.value)
}
</script>
<style lang="less" scoped>
.search-history {
  background: #fff;
  padding: 3vw 5vw;
  border-top: 1px solid #f6f6f6;
  text-align: left;
  font-weight: 500;

  .search-history-tag {
    position: relative;
    font-size: 16px;
    color: #0074FF;

    .search-history-img {
      position: absolute;
      right: 0;
      top: 0;
      width: 4vw;

      img {
        width: 100%;
      }
    }
  }

  .search-history-cont {
    .search-history-list {
      line-height: 9vw;
      height: 9vw;
      display: block;
      font-size: 4vw;

      span {
        color: #0074FF;
        font-size: 10vw;
        padding-right: 1vw;
        position: relative;
        top: 2.5vw
      }
    }
  }

}
</style>